<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo">获得您的坐标：</p>
    <button onclick="getLocation()">试一下</button>
    <script>
        var x = document.getElementById('demo');

        function getLocation() {
            //使用HTML5地理定位
    var that = this
    if (navigator.geolocation) {               
        navigator.geolocation.getCurrentPosition(function (position) {
            console.log(position)
            alert('纬度：'+ position.coords.latitude)
            alert('经度：'+ position.coords.longitude)
            alert('海拔'+position.coords.altitude)
            alert('方向'+position.coords.heading)
            alert('速度'+position.coords.speed)
        }, function (error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert('用户拒绝对获取地理位置的请求。')
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('位置信息是不可用的。')
                    break;
                case error.TIMEOUT:
                    alert('请求用户地理位置超时。')
                    break;
                case error.UNKNOWN_ERROR:
                    alert('未知错误。')
                    break;
            }
        }, { enableHighAcuracy: false });
    } else {
        alert('Geolocation is not supported by this browser.')
    }
        }
    </script>
</body>

</html>